@extends('admin.layout.layout', ['row' => @$page])

@section('contain')
    <style type="text/css">
        .item-list td {
            text-align: center;
        }
    </style>


    <div class="portlet">
        <div class="portlet-title">
            <div class="caption">
                <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
            </div>
            <div class="actions">
                <div class="item">
                    <a href="/admin/user/create" class="btn btn-primary">{{ ts('addnew') }}</a>
                </div>
            </div>
        </div>

        <div class="filter-wrapper">
            <form action="/{{ request()->path() }}/" class="form-inline filter-form">
                <div class=" input-group mb-3 custom-control-inline">
                    <input type="text" class="form-control s-input" name="value" value="{{ request()->input('value') }}" placeholder="请输入账号/手机号">
                </div>
                <div class="input-group mb-3 custom-control-inline">
                    <select name="status" class="form-control">
                        <option value="">{{ ts('select').' '.ts('status') }}</option>
                        <option value="1" {{ request()->input('status') == 1 ? 'selected' : '' }}>{{ ts('active') }}</option>
                        <option value="2" {{ request()->input('status') == 2 ? 'selected' : '' }}>{{ ts('deactive') }}</option>
                    </select>
                </div>

                <div class="mb-3">
                    <button class="btn btn-primary">{{ ts('SEARCH') }}</button>
                    <a href="/{{ request()->path() }}/" class="btn btn-warning">{{ ts('RESET') }}</a>
                </div>

            </form>
        </div>
        <div>
            <div>
                <table class="table table-s1">
                    <thead>
                    <tr class="order_column text-center">
                        <th data-column="id">账号</th>
                        <th data-column="first_name">姓名</th>
                        <th data-column="unique_id">手机号</th>
                        <th data-column="status">{{ ts('STATUS') }}</th>
                        <th data-column="role">角色</th>
                        <th data-column="act">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($data as $k => $v)
                        <tr class="item-list">
                            <td>{{ $v->unique_id }}</td>
                            <td>{{ $v->first_name }}</td>
                            <td>{{ @$v->phone_number }}</td>
                            <td>
                                {{ $v->status == 1 ? ts('ACTIVE') : ts('jy') }}
                            </td>
                            <td>{{ isset($roles[$v->role_id]) ? $roles[$v->role_id]['simple_chinese_name'] : '' }}</td>
                            <td  class="fixed-td text-center" style="width:270px">
                                <a class="btn btn-success btn-sm" href='/admin/user/edit?id={{ $v->id }}'>{{ ts('VIEW') }}</a>
                                <span class="btn {{$v->status != 1 ? 'btn-success' : 'btn-danger'  }}  btn-sm" onclick="editUser('{{ $v->id }}', '{{ $v->status }}', '{{ $v->abbr }}')">{{ $v->status != 1 ? ts('active') : ts('DEACTIVE') }}</span>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            <div class="row my-3">
                {{--<div class="col-auto">
                    <label style="cursor: pointer"><input type="checkbox" class="icheck_all" data-ele=".roll_icheck"><span class="ml-2">{{ ts('SELECTALL') }}</span></label>
                    <span class="btn btn-primary ml-3" onclick="deleteAlliCheck('.roll_icheck', '/admin/distributor/deletes')">{{ ts('delete') }}</span>
                </div>--}}
                <div class="col">
                    {{ $data->appends(request()->input())->links() }}
                </div>
            </div>
        </div>


    </div>


@endsection

@section('script')
    <script>
        $(document).ready(function () {
            /*$('.table.bt-table').bootstrapTable({
                fixedColumns: true,
                fixedNumber: 1,
                fixedRightNumber: 1,
            }).removeClass('d-none')*/
        })

        function editUser(id, status, name) {
            if (status != 1) {
                title = '确定启用 '+name+' ?'
            }  else {
                title = '确定停用 '+name+' ?'
            }
            sweetAlert({
                title: title,
                // icon: "warning",
                content: {
                    element: "input",
                    attributes: {
                        placeholder: ts('EXPLAIN'),
                    },
                },
                buttons: {
                    cancel: {
                        text: ts('CANCEL'),
                        value: false,
                        visible: true,
                        className: "",
                        closeModal: true,
                    },
                    confirm: {
                        text: ts('CONFIRM'),
                        value: true,
                        visible: true,
                        className: "",
                        closeModal: false
                    }
                },
            }).then( function(d) {
                if (d !== false) {
                    url = '/admin/user/edit_status'
                    request.put(url, {
                        id: id,
                        status: status,
                        note: d,
                    }).then( function(d) {
                        sweetAlert({
                            title: ts('UPDATESUCCESS'),
                            icon: "success",
                            button: ts('confirm')
                        }).then( function(d) {
                            window.location.reload()
                        })
                    })
                }
            }).catch( function(d) {
            })
        }
    </script>
@endsection
